<template>
   <el-page-header :icon="null" @back="backout">
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          统计信息
        </span>
        <el-tag>admin</el-tag>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right">管理员操作</el-divider>
   <!-- 首行数据统计卡片 -->
   <!-- <el-card width="100%">
     <el-row>
       <el-col :span="6">
         <el-statistic title="已通过" :value="268500" />
       </el-col>
       <el-col :span="6">
         <el-statistic :value="138">
           <template #title>
             <div style="display: inline-flex; align-items: center">
               未通过
               <el-icon style="margin-left: 4px" :size="12">
                 <Male />
               </el-icon>
             </div>
           </template>
           <template #suffix>/100</template>
         </el-statistic>
       </el-col>
       <el-col :span="6">
         <el-statistic title="已审核" :value="172000" />
       </el-col>
       <el-col :span="6">
         <el-statistic title="待审核" :value="562">
           <template #suffix>
             <el-icon style="vertical-align: -0.125em">
               <ChatLineRound />
             </el-icon>
           </template>
         </el-statistic>
       </el-col>
     </el-row>
   </el-card> -->
   <!-- <br> -->
 <!-- 数据统计图表 -->
 
 <el-row><el-col :span="10">
   <el-card class="box-card">
     <template #header>
       <div class="card-header">
         <span>统计图表</span>
       </div>
     </template>
     <EchartsChart></EchartsChart>
   </el-card>
 </el-col>

 <el-col :span="10">
   <el-card class="box-card">
     <template #header>
       <div class="card-header">
         <span>统计图表</span>
         <el-button class="button" text>Operation button</el-button>
       </div>
     </template>
      <EchartsChart1></EchartsChart1>
     <template #footer>Footer content</template>
   </el-card>
 </el-col>
 
 <el-col :span="4">
   <!-- <el-card class="box-card">
     <el-countdown format ="DD [days] HH:mm:ss" :value="value2">
         <template #title>
           <div style="display: inline-flex; align-items: center">
             <el-icon style="margin-right: 4px" :size="12">
               <Calendar />
             </el-icon>
             Still to go until next month
           </div>
         </template>
       </el-countdown>
       <div class="countdown-footer">{{ value2.format('YYYY-MM-DD') }}</div>  
     </el-card> -->
 </el-col>
 </el-row>
 
<el-row><el-col :span="24">
   <el-card class="box-card">
     <template #header>
       <div class="card-header">
         <span>统计图表</span>
       </div>
     </template>
     <EchartsChart2></EchartsChart2>
     <template #footer>Footer content</template>
   </el-card>
 </el-col></el-row>
 
 </template>
    
 <script>
 import EchartsChart from './components/WorkSort.vue'
 import EchartsChart1 from './components/WorkSortPie.vue'
 import EchartsChart2 from './components/DateTrend.vue'



 // Echarts5 导入方式
 import * as echarts from 'echarts'
 import { ChatLineRound, Male } from '@element-plus/icons-vue'
 import { ref } from 'vue'
 import dayjs from 'dayjs'
 import { Calendar } from '@element-plus/icons-vue'
 import { h } from 'vue'
 import { ElDivider } from 'element-plus'
 const value2 = ref(dayjs().add(1, 'month').startOf('month'))
 
 export default {
  setup() {

const size = ref(50)
const spacer = h(ElDivider, { direction: 'vertical' })

return {
  size,
  spacer,
  // 其他需要暴露给模板的属性
}
},
  components:{
    EchartsChart,
    EchartsChart1,
    EchartsChart2,
    // EchartsChart3
  },
   mounted() {
     //调用methods中的init方法
     //this.init2() //b 整合图 
 
     
   },
   methods: {
    center(){
      this.$router.push('admincenter')
    },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },
     init2() {
       let chartDom = document.getElementById('b');
       let myChart = echarts.init(chartDom);
       let option;
       option = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross',
             crossStyle: {
               color: '#999'
             }
           }
         },
         toolbox: {
           feature: {
             dataView: { show: true, readOnly: false },
             magicType: { show: true, type: ['line', 'bar'] },
             restore: { show: true },
             saveAsImage: { show: true }
           }
         },
         legend: {
           data: ['Evaporation', 'Precipitation', 'Temperature']
         },
         xAxis: [
           {
             type: 'category',
             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
             axisPointer: {
               type: 'shadow'
             }
           }
         ],
         yAxis: [
           {
             type: 'value',
             name: 'Precipitation',
             min: 0,
             max: 250,
             interval: 50,
             axisLabel: {
               formatter: '{value} ml'
             }
           },
           {
             type: 'value',
             name: 'Temperature',
             min: 0,
             max: 25,
             interval: 5,
             axisLabel: {
               formatter: '{value} °C'
             }
           }
         ],
         series: [
           {
             name: 'Evaporation',
             type: 'bar',
             tooltip: {
               valueFormatter: function (value) {
                 return value + ' ml';
               }
             },
             data: [
               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
             ]
           },
           {
             name: 'Precipitation',
             type: 'bar',
             tooltip: {
               valueFormatter: function (value) {
                 return value + ' ml';
               }
             },
             data: [
               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
             ]
           },
           {
             name: 'Temperature',
             type: 'line',
             yAxisIndex: 1,
             tooltip: {
               valueFormatter: function (value) {
                 return value + ' °C';
               }
             },
             data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
           }
         ]
       };
       option && myChart.setOption(option);
 
 
     },
   }
 }
 </script>
 <style>
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .text {
   font-size: 14px;
 }
 
 .item {
   margin-bottom: 18px;
 }
 
 .box-card {
   width: 95%;
 
 }
 
 .el-col {
   text-align: center;
 }
 
 .countdown-footer {
   margin-top: 8px;
 }
 </style>